<template>
	<el-dialog v-dialogDrag :visible.sync="isShow" width="760px" custom-class="group-member-selector-dialog">
		<!-- 弹窗头部 -->
		<div slot="title" class="dialog-header">
			<i class="fas fa-users-cog header-icon"></i>
			<span class="header-title">{{ title }}</span>
		</div>

		<div class="group-member-selector">
			<!-- 左侧成员列表 -->
			<div class="left-panel">
				<div class="panel-header">
					<i class="fas fa-users panel-icon"></i>
					<span class="panel-title">群成员列表</span>
					<span class="member-count">{{ showMembers.length }}</span>
				</div>
				<div class="search-section">
					<el-input placeholder="搜索群成员" v-model="searchText" size="medium" clearable class="search-input">
						<template #prefix>
							<i class="fas fa-search search-icon"></i>
						</template>
					</el-input>
				</div>
				<div class="member-list-container">
					<virtual-scroller class="member-scroller" :items="showMembers">
						<template v-slot="{ item }">
							<group-member-item :group="group" :groupMembers="showMembers" :member="item" :menu="false"
								@click.native="onClickMember(item)" class="member-item-wrapper">
								<el-checkbox :disabled="item.locked" v-model="item.checked" @change="onChange(item)"
									@click.native.stop="" class="member-checkbox">
								</el-checkbox>
							</group-member-item>
						</template>
					</virtual-scroller>
				</div>
			</div>

			<!-- 中间箭头 -->
			<div class="transfer-arrow">
				<i class="fas fa-arrow-right arrow-icon"></i>
			</div>

			<!-- 右侧已选列表 -->
			<div class="right-panel">
				<div class="panel-header">
					<i class="fas fa-check-circle panel-icon"></i>
					<span class="panel-title">已选成员</span>
					<span class="selected-count">{{ checkedMembers.length }}</span>
				</div>
				<div class="selected-list-container">
					<el-scrollbar class="selected-scrollbar">
						<div class="selected-list">
							<div v-for="m in members" :key="m.userId">
								<group-member class="selected-member-item" v-if="m.checked" :member="m">
								</group-member>
							</div>

							<!-- 空状态 -->
							<div v-if="checkedMembers.length === 0" class="empty-selected">
								<i class="fas fa-user-check empty-icon"></i>
								<p class="empty-text">暂未选择成员</p>
								<p class="empty-desc">请从左侧选择群成员</p>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</div>

		<!-- 底部操作按钮 -->
		<div slot="footer" class="dialog-footer">
			<el-button @click="close()" class="cancel-btn">
				<i class="fas fa-times"></i>
				取消
			</el-button>
			<el-button type="primary" @click="ok()" :disabled="checkedMembers.length === 0" class="confirm-btn">
				<i class="fas fa-check"></i>
				确定 {{ checkedMembers.length > 0 ? `(${checkedMembers.length})` : '' }}
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
import VirtualScroller from '../common/VirtualScroller.vue';
import GroupMemberItem from './GroupMemberItem.vue';
import GroupMember from './GroupMember.vue';
import { getGroupMembersApi } from '@/api/imGroup.js';

export default {
	name: "addGroupMember",
	components: {
		GroupMemberItem,
		GroupMember,
		VirtualScroller
	},
	data() {
		return {
			isShow: false,
			searchText: "",
			maxSize: -1,
			members: []
		}
	},
	props: {
		group: {
			type: Object
		},
		title: {
			type: String,
			default: "选择成员"
		}
	},
	methods: {
		open(maxSize, checkedIds, lockedIds, hideIds) {
			this.maxSize = maxSize;
			this.isShow = true;
			this.loadGroupMembers(checkedIds, lockedIds, hideIds);
		},
		loadGroupMembers(checkedIds, lockedIds, hideIds) {
			getGroupMembersApi(this.group.id).then((res) => {
				let members = res.data;
				members.forEach((m) => {
					// 默认选择和锁定的用户
					m.checked = checkedIds.indexOf(m.userId) >= 0;
					m.locked = lockedIds.indexOf(m.userId) >= 0;
					m.hide = hideIds.indexOf(m.userId) >= 0;
				});
				this.members = members;
			}).catch((error) => {
				console.error("加载群组成员失败：", error);
				this.$message.error("加载群组成员失败：" + (error.message || "未知错误"));
			});
		},
		onClickMember(m) {
			if (!m.locked) {
				m.checked = !m.checked;
			}
			if (this.maxSize > 0 && this.checkedMembers.length > this.maxSize) {
				this.$message.error(`最多选择${this.maxSize}位成员`)
				m.checked = false;
			}
		},
		onChange(m) {
			if (this.maxSize > 0 && this.checkedMembers.length > this.maxSize) {
				this.$message.error(`最多选择${this.maxSize}位成员`)
				m.checked = false;
			}
		},
		ok() {
			this.$emit("complete", this.checkedMembers);
			this.isShow = false;
		},
		close() {
			this.isShow = false;
		}
	},
	computed: {
		checkedMembers() {
			let ids = [];
			this.members.forEach((m) => {
				if (m.checked) {
					ids.push(m);
				}
			})
			return ids;
		},
		showMembers() {
			return this.members.filter((m) => !m.hide && !m.quit && m.showNickName.includes(this.searchText))
		}
	}
}
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

// 弹窗样式
:deep(.group-member-selector-dialog) {
	.el-dialog {
		border-radius: var(--im-border-radius-lg);
		box-shadow: var(--im-box-shadow-dialog);
		overflow: hidden;
		z-index: 2000; // 确保弹窗层级合适
	}

	.el-dialog__wrapper {
		z-index: 2000;
	}

	.el-dialog__header {
		padding: 0;
		border-bottom: var(--im-border);
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		padding: var(--im-spacing-lg) var(--im-spacing-xl);
		border-top: var(--im-border);
		background: var(--im-bg-secondary);
	}

	.el-dialog__headerbtn {
		top: 15px;
		right: 15px;
		width: 32px;
		height: 32px;
		font-size: 16px;
		color: var(--im-text-color-secondary);
		background: var(--im-bg-secondary);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all var(--im-transition-base);

		&:hover {
			color: white;
			background: var(--im-color-danger);
			transform: scale(1.1);
		}

		.el-dialog__close {
			font-weight: bold;
		}
	}
}

// 弹窗头部
.dialog-header {
	display: flex;
	align-items: center;
	padding: var(--im-spacing-lg) var(--im-spacing-xl);
	background: var(--im-bg-primary);
	border-bottom: var(--im-border);

	.header-icon {
		font-size: 20px;
		color: var(--im-color-primary);
		margin-right: var(--im-spacing-sm);
	}

	.header-title {
		font-size: var(--im-font-size-lg);
		font-weight: var(--im-font-weight-semibold);
		color: var(--im-text-color-primary);
	}
}

// 主容器
.group-member-selector {
	display: flex;
	height: 520px;
	background: var(--im-bg-primary);
}

// 左侧面板
.left-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-right: var(--im-border);
	background: var(--im-bg-primary);
}

// 右侧面板
.right-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--im-bg-primary);
}

// 面板头部
.panel-header {
	display: flex;
	align-items: center;
	padding: var(--im-spacing-base) var(--im-spacing-lg);
	background: var(--im-bg-secondary);
	border-bottom: var(--im-border);

	.panel-icon {
		font-size: var(--im-font-size-base);
		color: var(--im-color-primary);
		margin-right: var(--im-spacing-sm);
	}

	.panel-title {
		font-size: var(--im-font-size-base);
		font-weight: var(--im-font-weight-semibold);
		color: var(--im-text-color-primary);
		flex: 1;
	}

	.member-count,
	.selected-count {
		background: var(--im-color-primary);
		color: white;
		font-size: var(--im-font-size-xs);
		font-weight: var(--im-font-weight-semibold);
		padding: 2px 8px;
		border-radius: var(--im-border-radius-round);
		min-width: 20px;
		text-align: center;
	}
}

// 搜索区域
.search-section {
	padding: var(--im-spacing-base) var(--im-spacing-lg);
	border-bottom: var(--im-border);
	background: var(--im-bg-primary);

	.search-input {
		:deep(.el-input__inner) {
			border-radius: var(--im-border-radius-base);
			border: var(--im-border);
			background: var(--im-bg-secondary);
			color: var(--im-text-color-primary);

			&:focus {
				border-color: var(--im-color-primary);
				box-shadow: 0 0 0 2px var(--im-color-primary-light-8);
			}
		}
	}

	.search-icon {
		color: var(--im-text-color-placeholder);
		font-size: var(--im-font-size-sm);
	}
}

// 成员列表容器
.member-list-container {
	flex: 1;
	overflow: hidden;

	.member-scroller {
		height: 100%;
		padding: var(--im-spacing-xs);

		:deep(.virtual-scroller__wrap) {
			overflow-x: hidden;
		}
	}
}

// 成员项包装器
.member-item-wrapper {
	margin-bottom: var(--im-spacing-xs);
	border-radius: var(--im-border-radius-base);
	transition: all var(--im-transition-base);
	cursor: pointer;

	&:hover {
		background: var(--im-bg-hover);
		transform: translateY(-1px);
		box-shadow: var(--im-box-shadow-hover);
	}

	:deep(.member-checkbox) {
		margin-right: var(--im-spacing-base);

		.el-checkbox__input.is-checked .el-checkbox__inner {
			background-color: var(--im-color-primary);
			border-color: var(--im-color-primary);
		}
	}
}

// 中间箭头
.transfer-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	background: var(--im-bg-secondary);
	border-top: var(--im-border);
	border-bottom: var(--im-border);

	.arrow-icon {
		font-size: 20px;
		color: var(--im-color-primary);
		animation: pulse 2s infinite;
	}
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

// 已选列表容器
.selected-list-container {
	flex: 1;
	overflow: hidden;

	.selected-scrollbar {
		height: 100%;

		:deep(.el-scrollbar__wrap) {
			overflow-x: hidden;
		}
	}
}

// 已选列表
.selected-list {
	padding: var(--im-spacing-xs);
	display: flex;
	flex-wrap: wrap;
	gap: var(--im-spacing-xs);
}

// 已选成员项
.selected-member-item {
	border-radius: var(--im-border-radius-base);
	background: var(--im-bg-secondary);
	border: 1px solid var(--im-color-primary-light-8);
	transition: all var(--im-transition-base);
	margin-bottom: var(--im-spacing-xs);

	&:hover {
		background: var(--im-bg-hover);
		border-color: var(--im-color-primary-light-6);
		transform: translateY(-1px);
		box-shadow: var(--im-box-shadow-hover);
	}
}

// 空状态
.empty-selected {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--im-spacing-xxl);
	text-align: center;
	height: 200px;
	width: 100%;

	.empty-icon {
		font-size: 48px;
		color: var(--im-text-color-placeholder);
		margin-bottom: var(--im-spacing-lg);
		opacity: 0.6;
	}

	.empty-text {
		font-size: var(--im-font-size-base);
		color: var(--im-text-color-primary);
		margin: 0 0 var(--im-spacing-xs) 0;
		font-weight: var(--im-font-weight-medium);
	}

	.empty-desc {
		font-size: var(--im-font-size-sm);
		color: var(--im-text-color-secondary);
		margin: 0;
	}
}

// 底部按钮
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--im-spacing-base);

	.cancel-btn,
	.confirm-btn {
		border-radius: var(--im-border-radius-base);
		font-size: var(--im-font-size-sm);
		padding: var(--im-spacing-sm) var(--im-spacing-lg);

		i {
			margin-right: var(--im-spacing-xs);
		}
	}

	.cancel-btn {
		background: var(--im-bg-secondary);
		border-color: var(--im-border-color);
		color: var(--im-text-color-secondary);

		&:hover {
			background: var(--im-bg-hover);
			border-color: var(--im-text-color-secondary);
			color: var(--im-text-color-primary);
		}
	}

	.confirm-btn {
		background: var(--im-color-primary);
		border-color: var(--im-color-primary);

		&:hover:not(:disabled) {
			background: var(--im-color-primary-dark-1);
			border-color: var(--im-color-primary-dark-1);
			transform: translateY(-1px);
			box-shadow: var(--im-box-shadow-hover);
		}

		&:disabled {
			background: var(--im-text-color-disabled);
			border-color: var(--im-text-color-disabled);
			cursor: not-allowed;
		}
	}
}
</style>